<!--
 * @Author: 赵克强 huohuo625@163.com
 * @Date: 2024-09-26 16:08:42
 * @LastEditors: 赵克强 huohuo625@163.com
 * @LastEditTime: 2025-04-15 13:50:16
 * @FilePath: \hy-ui\src\views\trainingCenter\components\trainingPlan.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <div class="courseCenter" v-if="active === '1'" v-loading="loading">
      <div class="trainingPlanMain">
        <div>
          <div class="trainingPlan_top_bar">
            <el-tabs
              v-model="activeName"
              @tab-click="handleClick"
              v-if="tagListOption.length"
            >
              <el-tab-pane
                :label="item.tagName"
                :name="item.id"
                v-show="index <= 6"
                v-for="(item, index) in tagListOption"
                :key="item.id"
              ></el-tab-pane>
            </el-tabs>
            <!-- <el-checkbox-group v-model="value">
            <el-checkbox label="1">直播</el-checkbox>
          </el-checkbox-group> -->
            <div class="addBtn">
              <el-input
                v-model="searchValue"
                placeholder="请输入"
                size="mini"
              ></el-input>
              <el-button type="primary" size="mini" @click="getCourseCenterList"
                >搜索</el-button
              >
            </div>
          </div>
          <div class="trainingPlanList" v-if="list.length">
            <div
              class="trainingPlanItem"
              v-for="item in list"
              :key="item.id"
              @click="
                handleDetail(item, '2', {
                  planId: '',
                  courseId: item.id,
                  lesson: item,
                })
              "
            >
              <div class="coverImg">
                <img :src="getImg(item.picture)" alt="" />
              </div>
              <div class="itemTitle">
                {{ item.title }}
              </div>
              <div class="detail">
                <span :style="{ color: '#999999' }"
                  ><i class="el-icon-user"></i
                  ><span style="margin-left: 6px"
                    >{{ item.joinCount }}人参与</span
                  ></span
                >
                <span style="background:#ff9329;color:#fff;padding:2px 5px;border-radius: 4px;">{{ item.category_title }}</span>
              </div>
            </div>
          </div>
          <div
            style="
              display: flex;
              justify-content: center;
              height: 68vh;
              align-items: center;
            "
            v-else
          >
            <div class="planNoData">
              <img src="../../../assets/images/planNoData.png" alt="" />
              <span>暂无课程</span>
            </div>
          </div>
        </div>
      </div>
      <div class="pagination">
        <pagination
          v-show="total > 0"
          :page-sizes="[20, 40, 60, 80, 100]"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
          :background="false"
        />
      </div>
    </div>
    <Courselist
      v-if="active === '2'"
      :goBack="handleDetail"
      :planId="courseware.planId"
      :courseId="courseware.courseId"
      :lesson="courseware.lesson"
      :isCourseCenter="true"
    />
  </div>
</template>
<script>
import Courselist from "@/views/trainingCenter/components/courselist";
import { tagList, courseCenter } from "@/api/trainingCenter";
export default {
  components: {
    Courselist,
  },
  data() {
    return {
      loading: false,
      activeName: "1",
      active: "1",
      searchValue: "",
      total: 0,
      tagListOption: [],
      queryParams: {
        pageSize: 20,
        pageNum: 1,
      },
      list: [],
      courseware:{
        planId:'',
        courseId:'',
        lesson:{}
      }
    };
  },
  async mounted() {
    this.loading = true;
    await this.getTagList();
    this.loading = false;
  },
  methods: {
    // 获取标签列表
    async getTagList() {
      const res = await tagList();
      this.activeName = res.data?.[0]?.id;
      this.tagListOption = res.data;
      await this.getCourseCenterList();
    },
    // 获取课程中心列表
    async getCourseCenterList() {
      this.loading = true;
      const res = await courseCenter({
        tag: this.activeName,
        keyword: this.searchValue,
        ...this.queryParams,
      });
      this.total = res.data?.total;
      this.list = res.data?.list || [];
      this.loading = false;
    },
    handleDetail(row, type,val) {
      this.active = type;
      this.courseware = val
    },
    async handleClick(val) {
      await this.getCourseCenterList();
    },
    getImg(data) {
      let img = undefined;
      if (!!data) {
        img = JSON.parse(data);
      }
      if (img?.length) {
        return img[0].url;
      }
      return require("../../../assets/images/banner1.png");
    },
  },
};
</script>

<style lang="scss" scoped>
.courseCenter {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #f4f4f4;
  padding: 30px 0;
  height: calc(100vh - 135px);
  .planNoData {
    padding: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    span {
      font-weight: 500;
      font-size: 12px;
      color: #bbbbbb;
      line-height: 48px;
    }
  }
  .pagination {
    width: 1198px;
    display: flex;
    justify-content: flex-end;
    ::v-deep .pagination-container {
      width: 100%;
      background: transparent;
      margin-top: 0;
      .el-pager li,
      .btn-prev,
      .btn-next {
        background: transparent;
      }
      .el-input__inner {
        background: transparent;
      }
    }
  }
  .trainingPlanMain {
    width:1198px;
    background: #ffffff;
    border-radius: 6px;
    padding: 17px 24px;
    .chooseCourse {
      .topBar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        & > span {
          font-family: Microsoft YaHei;
          font-weight: 400;
          font-size: 14px;
          color: #666666;
          cursor: pointer;
        }
      }
    }
    ::v-deep .el-tabs__nav-wrap::after {
      display: none;
    }
    .trainingPlan_top_bar {
      position: relative;
      ::v-deep .el-tabs {
        width: 70%;
      }
    }
    .addBtn {
      position: absolute;
      right: 0;
      top: 10px;
      display: flex;
      ::v-deep .el-button--primary {
        background: #2f54eb;
        border: none;
        border-radius: 0 3px 3px 0;
      }
      ::v-deep .el-input__inner {
        border-radius: 3px 0 0 3px;
      }
    }
    .trainingPlanList {
      width: 100%;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      grid-column-gap: 11px;
      grid-row-gap: 16px;
      justify-items: stretch;
      align-items: start;
      overflow-y: auto;
      height: 68vh;
      .trainingPlanItem {
        cursor: pointer;
        padding: 10px;
        background: #fff;
        box-shadow: 0px 4px 9px 0px rgba(0, 0, 0, 0.1);
        border-radius: 10px;
        &:hover img {
          transform: scale(1.1);
        }
        .coverImg {
          width: 100%;
          height: 150px;
          overflow: hidden;
          border-radius: 10px;
          img {
            width: 100%;
            height: 100%;
            transition: 1000ms ease all;
          }
        }
        .itemTitle {
          font-family: Microsoft YaHei;
          font-weight: 400;
          font-size: 14px;
          color: #333333;
          margin: 12px 0;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
          line-height: 20px;
        }
        .detail {
          display: flex;
          justify-content: space-between;
          font-size: 12px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #666;
        }
      }
    }
  }
}
</style>